<template>
  <div class="user">
    <div class="usercon">
      <div class="content">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="clear:both;"></div>
        <div class="Search">
          <div class="inputs">
            <input type="text" placeholder="请输入内容" />
            <div>
              <i class="el-icon-search"></i>
            </div>
          </div>
          <el-button type="success" plain @click="dialogFormVisible = true">添加用户</el-button>

          <el-dialog title="添加用户" :visible.sync="dialogFormVisible" append-to-body>
            <el-form :model="form">
              <el-form-item
                label="用户名"
                prop="username"
                :label-width="formLabelWidth"
                :rules="[
            { required: true, message: '用户名不能为空'},
           ]"
              >
                <el-input v-model="form.username"></el-input>
              </el-form-item>
              <el-form-item
                label="密码"
                :label-width="formLabelWidth"
                prop="password"
                :rules="[
            { required: true, message: '密码不能为空'},
           ]"
              >
                <el-input v-model="form.password" type="password"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="dynamicValidateForm.email" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <div>
          <el-table ref="singleTable" :data="usersTabel" style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column property="username" label="姓名" width="100"></el-table-column>
            <el-table-column property="email" label="邮箱" width="180"></el-table-column>
            <el-table-column property="mobile" label="电话" width="200"></el-table-column>
            <el-table-column property="create_time" label="创建日期" width="204">
              <template slot-scope="scope">{{scope.row.create_time | YYYYMMDD}}</template>
            </el-table-column>
            <el-table-column property="mg_state" label="用户状态" width="204">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.mg_state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :plain="true"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column property="address" label="操作" width="300">
              <el-button type="primary" plain size="mini" is-circle class="btn">
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button type="danger" plain size="mini" is-circle class="btn">
                <i class="el-icon-delete" @click="open6"></i>
              </el-button>
              <el-button type="success" plain size="mini" is-circle class="btn">
                <i class="el-icon-check"></i>
              </el-button>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            :current-page="pagenum"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchCon: "",
      usersTabel: [],
      pagenum: 1,
      pagesize: 2,
      total: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        username: "",
        password: ""
      },
      formLabelWidth: "100px",
      dynamicValidateForm: {
        domains: [
          {
            value: ""
          }
        ],
        email: ""
      }
    };
  },
  watch: {
    pagesize() {
      this.getUsers();
    },
    pagenum() {
      this.getUsers();
    }
  },
  methods: {
    //获取用户 列表
    getUsers() {
      this.$http("users", {}, "get", {
        query: "",
        pagenum: this.pagenum,
        pagesize: this.pagesize
      }).then(res => {
        this.usersTabel = res.data.users;
        this.total = res.data.total;
      });
    },
    //每页条数改变触发
    sizeChange(val) {
      this.pagesize = val;
      this.pagenum = 1;
    },
    //当前页数变化
    currentChange(val) {
      this.pagenum = val;
    },
    open6() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  created() {
    this.getUsers();
  }
};
</script>

<style scoped lang="scss">
.user {
  width: 100%;
  height: 100%;
  display: flex;
  .usercon {
    padding: 20px;
    margin: 60px 0 0 199px;
    flex: 1;
    overflow-y: scroll;
  }
  .content {
    height: 100%;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ebeef5;
    padding: 20px;
  }

  .Search {
    margin: 10px 0;
    display: flex;
    .inputs {
      width: 350px;
      display: flex;
      margin-right: 5px;
      > input {
        background-color: #fff;
        border-radius: 4px 0 0 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        width: 100%;
      }
      input::-webkit-input-placeholder {
        color: #ccc;
      }
      :focus {
        border: 1px solid #58a6e7;
      }
      > div {
        width: 57px;
        height: 40px;
        line-height: 40px;
        background-color: #f5f7fa;
        color: #909399;
        border-top: 1px solid #dcdfe6;
        border-right: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        border-radius: 0 4px 4px 0;
        padding: 0 20px;
        cursor: pointer;
        box-sizing: border-box;
      }
    }
  }
  .btn {
    border-radius: 50%;
    padding: 7px;
  }
}
</style>
